<template>
  <div>
    <div class="point-map-wrap">
      <pointMap
          ref="pointMapRef"
          :point=point
          :actionType=actionType
          :symbolColor="SymbolColor"
          @polygonGraphic="polygonGraphic"
          @pointCoordinate=pointCoordinate></pointMap>
    </div>
    <div class="form-ul">
      <ul>
        <li v-for="graphic in graphicAry">
          |<input type="color" @change="colorClick($event,graphic)">
          <button @click="btnDelet(graphic)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import pointMap from "./pointMap/pointMap.vue";
  export default {
    name: "pointMapDialog",
    data(){
      return {
        point: [114.21868761726246, 30.584733852070247],
        actionType: '',   // 值为'edit'则是编辑point传入
        data:[],
        SymbolColor: "#ff0000",
        graphicAry:[]
      }
    },
    components: {
      pointMap
    },
    methods:{
      pointCoordinate(data){
        // this.data = data;
        // this.point = data;
        // this.actionType = 'edit'
      },
      polygonGraphic(graphic){
        this.graphicAry.push(graphic) ;
        //console.log(graphic)
      },
      colorClick(evt,graphic){
        let colorStr = evt.target.value;
        let colorAry = this.colorRgb(colorStr);
        this.$refs.pointMapRef.changeColor(graphic.uid,{r: colorAry[0], g: colorAry[1], b: colorAry[2], a: 0.5});
      },
      btnDelet(graphic){
        this.$refs.pointMapRef.deleteRings(graphic.uid);
      }
    },
    created(){
      let self = this;
      // setTimeout(function(){
      //   self.point = [ 114.22012005336887, 30.58153109697548 ];
      //   self.actionType = 'edit';
      // },1000);
    },
    watch:{
      SymbolColor(val){

        //console.log(this.colorRgb(val))
        //console.log(this.graphic)
        if(this.graphic){
          let colorAry = this.colorRgb(val);
          this.$refs.pointMapRef.changeColor(this.graphic,{r: colorAry[0], g: colorAry[1], b: colorAry[2], a: 0.5});
        }

      }
    }
  }
</script>

<style scoped>
.point-map-wrap {
  width: 600px;
  height: 800px;
}
.form-ul {
  position: absolute;
  right: 0;
  top: 76px;
}
</style>
